<template>
  <div class="w-full">
    <Transition name="internalEmail">
      <template v-if="type == 'list'">
        <DraftboxList @handle-transmit="handleTransmit" @handle-edit="handleEdit" />
      </template>
      <template v-else-if="type == 'transmit'">
        <TransmitMessage
          @handle-return="handleReturn"
          :currentRecordTransmit="currentRecordTransmit"
        />
      </template>
      <template v-else-if="type == 'edit'">
        <EditMessage @handle-return="handleReturn" type="draftbox" :currentRecord="currentRecord" />
      </template>
    </Transition>
  </div>
</template>
<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import DraftboxList from './draftboxList.vue';
  import TransmitMessage from '../writebox/transmitMessage.vue';
  import EditMessage from '../writebox/editMessage.vue';
  const currentRecord = ref({});
  const currentRecordTransmit = ref({});
  const types = ref(['list']);
  const type = computed(() => (types.value.length ? types.value[types.value.length - 1] : ''));
  const handleTransmit = (record) => {
    currentRecordTransmit.value = record;
    types.value.push('transmit');
  };
  const handleEdit = (record) => {
    currentRecord.value = record;
    types.value.push('edit');
  };
  const handleReturn = () => {
    types.value.pop();
  };
</script>
<style lang="less" scoped>
  @import url(../common/internalEmail.less);
</style>
